<template>
  <div class="out-box">

    <!--      顶部的选择条件-->
    <div class="top-row-box">
      <div class="info-in-box margin-right">
        <div>
          <span class="title" style="float: left;">选择日期:</span>
          <el-date-picker
            style="width: 60%;float: left;"
            @change="initPage();getPatientList()"
            v-model="appointDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div v-if="isAdmin === ''">
          <span class="title" style="float: left;margin-left: 10px;">选择师傅:</span>
          <el-select v-model="doctor" style="width: 56%;float: left;" @change="initPage();getPatientList();" placeholder="请选择">
            <el-option
              v-for="item in doctorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <span class="title" style="float: left;margin-left: 10px;">选择状态:</span>
          <el-select v-model="status" style="width: 56%;float: left;" @change="initPage();getPatientList()" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-button type="primary" style="width: 70px;height: 90%;" @click="getPatientList()">查询</el-button>
    </div>

    <!--    删除-->
    <div style="height: 10%;width: 100%;">
      <div class="info-in-box margin-right">
        <div v-if="isAdmin === ''">
          <span class="title" style="float: left">删除预约:</span>
          <el-select v-model="deleteTimePeriod" style="width: 65%;float: left;" placeholder="请选择">
            <el-option
              v-for="item in deleteList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button type="danger" size="small" style="height: 80%;margin: 5px 0 0 15px;" @click="deleteAppoint">删除</el-button>
      </div>
    </div>
    <!--      表格位置-->
    <div class="button-table-box">
      <span class="treat-room-text"></span>
      <table-list :tableAllData="tableAllData" @getTableData="getTableData" ref="tableList"></table-list>
      <page-pagination :page-list="pageList" ref="pagePagination"></page-pagination>
    </div>
  </div>
</template>

<script>
import {cancelAppoint, completeAppoint, getAllDoctor, getAppointDetail, getPatientList} from "@/api/doctor";
import {dateFormYMD} from "@/common/js/dateFormYMD";
import {tips} from "@/common/js/optionTips";
import {getGender, getTimePeriod} from "@/common/js/timeFilters";
import {getCookie} from "@/utils/cookies";
import {updateTreatStatusFinish, updateStatusAgain} from "@/api/patient";
import {appointsStatus, appointStatus} from "@/common/js/appointStatus";
import app from "@/store/modules/app";
import {deleteAppoint} from "@/api/outCall";

export default {
  name: "appointDetail",
  data() {
    return {
      deleteTimePeriod:'',
      deleteList:[ {
        value: '1',
        label: '一个月以外'
      }, {
        value: '2',
        label: '三个月以外'
      }, {
        value: '3',
        label: '半年以外'
      }, {
        value: '4',
        label: '一年以外'
      }],
      isAdmin: getCookie('username') === 'admin' ? '' : getCookie('username'),
      appointDate: '', // 顶部选择的日期
      ctTimeID: 1,
      // 选择状态
      statusOptions: [
        //   {
        //   value: '全部',
        //   label: '全部'
        // },
        {
          value: '未开始',
          label: '未开始'
        }, {
          value: '未按时就诊',
          label: '未按时就诊'
        }, {
          value: '取消预约',
          label: '取消预约'
        }, {
          value: '已完成',
          label: '已完成'
        }],
      status: '未开始',
      doctorOptions: [
        {
          value: '',
          label: '全部'
        }
      ],
      doctor: '全部',
      // 表格数据
      tableAllData: {
        dataNull: false,
        tableTitle: [{
          prop: 'ID',
          label: '编号',
          width: '100',
        }, {
          prop: 'name',
          label: '姓名',
          width: '100',
        }, {
          prop: 'phone',
          label: '手机号',
          width: '110',
        }, {
          prop: 'appointDate',
          label: '预约日期',
          width: '110',
        }, {
          prop: 'timePeriod',
          label: '时间段',
          width: '110',
        },{
          prop: 'address',
          label: '店铺',
          width: '150',
        },{
          prop: 'Status',
          label: '状态',
          width: '100',
        }],
        tableData: [],
        option: {
          width: '500',
          button: []
        }
      },
      isTimeTreat: false,
      isClickTreat: false,
      // 底部分页的数据
      pageList: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      statusData: []
    }
  },
  created() {
    this.getPatientList();
    this.getAllDoctor();
  },
  methods: {
    // 删除预约
    deleteAppoint(){
      if(this.deleteTimePeriod === ''){
        tips('error','请选择删除的时间段');
        return;
      }
      this.$confirm('确认删除'+this.deleteList[this.deleteTimePeriod-1].label+'的预约记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(()=>{
        console.log('删除',this.deleteTimePeriod);
        deleteAppoint(this.deleteTimePeriod).then(res=>{
          if(res.code === 200){
            tips('success','删除'+this.deleteList[this.deleteTimePeriod-1].label+'的预约记录成功')
            this.getPatientList();
          }
        })
      })
    },
    // 从选择框切换状态初始化分页参数
    initPage:function (){
      this.pageList.pageNum = 1;
      this.pageList.pageSize = 10;
    },
    // 获取所有医生
    getAllDoctor:function (){
      let that = this
      getAllDoctor().then(res =>{
        if(res.code === 200){
          res.data.forEach(function (item){
            that.doctorOptions.push({
              value:item.id,
              label:item.name
            })
          })
        }

      })
    },
    // 获取从表格中获取的按钮的事件
    getTableData: function(option){
      console.log(option)
      let that = this
      if (option.buttonName === '确认') {
        this.$confirm('确认预约成功吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          //完成预约
          completeAppoint(option.scopeRow.ID).then(res => {
            if(res.code === 200){
              this.$notify({
                title: '成功',
                message: '完成预约成功',
                type: 'success'
              });
              //完成预约之后刷新页面
              that.getPatientList();
            }
          })
        });
      } else if (option.buttonName === '取消') {
        this.$confirm('确认取消预约吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          //取消预约
          cancelAppoint(option.scopeRow.ID).then(res =>{
            if(res.code === 200){
              this.$notify({
                title: '成功',
                message: '取消预约成功',
                type: 'warning'
              });
              // 取消预约之后刷新页面
              that.getPatientList();
            }
          })
        })
      }
    },
    // 根据条件查询预约列表
    getPatientList: function () {
      this.statusData = [];
      this.tableAllData.tableData = [];
      //let date = dateFormYMD(this.appointDate);
      let that = this
      if(this.doctor === '全部'){
        this.doctor = '';
      }
      //console.log(this.appointDate)
      // 确认预约按钮
      getAppointDetail(this.pageList.pageNum,this.pageList.pageSize,this.isAdmin === '' ? this.doctor : this.isAdmin,(this.appointDate === '' || this.appointDate === null) ? '' : dateFormYMD(this.appointDate),appointsStatus(this.status)).then(res => {
        //console.log('res',res)
        if (res.code === 200) {
          this.pageList = {
            pageNum: res.data.current,
            pageSize: res.data.size,
            total: res.data.total
          };
          let data = res.data.records
          if (data.length === 0){
            this.tableAllData.dataNull = true;
            return;
          }
          this.tableAllData.option.button = []
          // 如果预约选择的是未开始状态
          if(this.status === '未开始') {
            this.tableAllData.option.button.push({
                size: 'mini',
                type: 'success',
                name: '确认'
              },
              {
                size: 'mini',
                type: 'danger',
                name: '取消'
              })
          }
          data.forEach(function (item){
            if(that.status === appointStatus(item.status)){
              that.tableAllData.tableData.push({
                ID:item.id,
                name:item.childName,
                phone:item.phone,
                appointDate:item.day,
                timePeriod:item.time,
                address:item.address,
                Status:appointStatus(item.status),
              })
            }

          })
          this.tableAllData.dataNull = false;

        }
      }).catch(() => {
        tips('error', '获取预约列表失败 ');
        this.tableAllData.dataNull = true;
      })
    },
    // 子组件分页通过调用父组件的方法进行调用更新表格
    fatherMethod: function (pageNum, pageSize) {
      this.pageList.pageNum = pageNum;
      this.pageList.pageSize = pageSize;
      this.getPatientList(this.date,this.value)
    }
  }
}
</script>

<style lang="scss">
@import "../../../common/scss/common";
.out-box{
  @include width-margin(90%, 100%);
  .top-row-box{
    width: 100%;
    height: 100%;
    @include flex-direction(row);
    align-items: center;
    .margin-right{
      margin-right: 30px;
    }
  }
}
.button-table-box{
  @include width-margin(100%, 100%);
  margin-top: 15px;
  .treat-room-text{
    margin-top: 6%;
    @include font-style(16px, $major-blue-color);
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
  }
}
</style>
